import logo from './logo.svg';
// import './App.css';


// class组件
// 注意：组件名必须首字母大写（为了和普通标识符区分开）,必须继承自React.Component组件
// class组件中，使用的this是当前组件实例
import React, { Component } from 'react';

class App extends Component {
  constructor(props){  //在constuctor中对数组状态进行初始化 
    super(props);
    // 初始化组件模板
    this.state = {
         count:100,
         sex:false,
         arr:['node','reate','vue']
    }

  }

  // state = {
  //   count:100,
  //   sex:false,
  //   arr:['node','reate','vue']
  // }
  render() {   //render是必须 ，render中必须通过return返回  组件模板 
    return (
      <div className='App'>
        <h1>{this.state.count}</h1>
        <h1>{this.state.arr}</h1>
        <h1>{this.state.sex}</h1>
        
      </div>
    );
  }
}




// 函数式组件
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

export default App;
